import Vue from 'vue'
import Component from 'vue-class-component'
import OrderItemClass from './orderItem.js'
import BlankPageClass from '@/components/blankPage.js'
import VueScroller from '@/components/VueScroller.vue'

@Component({
  props: {
    url: String
  }
})
export default class OrderListClass extends Vue {
  orders = []
  canLoad = true
  isLoading = false
  currentPage = 0
  wrapperHeight= 0
  noData = false

  get caculateHeight() {
    return 'height:' + String(this.wrapperHeight) + 'px'
  }

  created() {
    this.wrapperHeight = document.documentElement.clientHeight - 64
    this.reloadOrders()
    let mySelf = this
    eventBus.$on('orderListUpdate', function(val) {
      mySelf.reloadOrders()
    })
  }

  activated() {
    // this.orders = []
    // this.reloadOrders()
  }

  getParameters() {
    let params = {}
    params['pageSize'] = 10
    params['pageIndex'] = this.currentPage
    return params
  }

  findOrders(pageIndex = 1) {
    let params = this.getParameters()
    params['pageIndex'] = pageIndex
    return this.$axios.post(this.url, params)
      .then(response => {
        if (response.status === 0) {
          if (pageIndex === 1) {
            this.orders = []
          }
          return response.data.orders
        }
      })
  }

  reloadOrders() {
    this.currentPage = 1
    this.findOrders(this.currentPage).then(orders => {
      console.log('dddddddddddddd', orders)

      if (orders) {
        this.orders = [...this.orders, ...orders]
      }

      this.showNodata()
    }).catch(() => {
      this.noData = true
    })
  }

  infiniteHandler($state) {
    this.findOrders(this.currentPage++).then(orders => {
      console.log('dddddddddddddd', orders)
      $state.loaded()
      if (orders) {
        this.orders = [...this.orders, ...orders]
        if (orders.length < 10) {
          $state.complete()
        }
      } else {
        $state.complete()
      }
      this.showNodata()
    }).catch(() => {
      // this.noData = true
      $state.complete()
    })
  }

  showNodata() {
    if (!this.orders || this.orders.length <= 0) {
      this.noData = true
    } else {
      this.noData = false
    }
  }

  // async getOrdersData(state) {
  //   if (this.currentPage === 1) {
  //     this.orders = []
  //   }
  //   try {
  //     let params = {}
  //     params['pageSize'] = 10
  //     params['pageIndex'] = this.currentPage
  //     this.isLoading = true
  //     const response = await this.$axios.post(this.url, params)

  //     if (response.status === 0) {
  //       if (!response.data.orders || response.data.orders.length < 10) {
  //         if (state) {
  //           state.complete()
  //         }
  //       }
  //       if (this.currentPage === 1) {
  //         this.orders = response.data.orders
  //       } else {
  //         this.orders = this.orders.concat(response.data.orders)
  //       }
  //       this.currentPage ++
  //     }
  //     if (state) {
  //       state.loaded()
  //     }
  //     if (!this.orders || this.orders.length <= 0) {
  //       this.noData = true
  //     } else {
  //       this.noData = false
  //     }
  //   } catch (e) {
  //     if (state) {
  //       state.complete()
  //     }
  //     console.log(e)
  //   }
  // }

  // loadMore (state) {
  //   this.getOrdersData(state)
  // }

  // refresh () {
  //   this.currentPage = 1
  //   this.getOrdersData()
  // }

  createOrderItems() {
    if (!this.orders || this.orders.length <= 0) {
      return
    }
    const item = this.orders.map(value => {
      return <OrderItemClass order={value}></OrderItemClass>
    })
    return item
  }

  render () {
    return (
      <div>
        <BlankPageClass onRefresh={this.reloadOrders} v-show={this.noData}></BlankPageClass>
        <VueScroller v-show={!this.noData} height={this.wrapperHeight} style={'margin-top:64px'} infinite={this.infiniteHandler} refresh={this.reloadOrders}>
          {this.createOrderItems()}
        </VueScroller>
      </div>
    )
  }
}
